<template>
  <view class="page">
    <view class="top">
      <view class="background"></view>
    </view>
    <view class="user-card">
      <view class="card">
        <view class="top">
          <view class="userImage">
			  <image src="@/static/uni.png" style="width:100%;height:100%;"></image>
            <!-- <open-data type="userAvatarUrl"></open-data> -->
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <view class="user-text">
			  <view>{{student.studentName}}</view>
            </view>
            <!-- <view class="user-phone"> 171****4133 </view> -->
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="list-card">
      <view class="card">
        <view class="item item-bottom-solid" @click="toSignList">
          <view class="left flex-center">
            <image src="../../static/myIcon/qiu.png" mode="aspectFit"></image>
          </view>
          <view class="center">
            <text>签到记录</text>
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="item item-bottom-solid" @click="toLeaveList">
          <view class="left flex-center">
            <image src="../../static/myIcon/2.png" mode="aspectFit"></image>
          </view>
          <view class="center">
            <text>请假记录</text>
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 新增预约拜访入口 -->
      <view class="card">
        <view class="item item-bottom-solid" @click="toAppointment">
          <view class="left flex-center">
            <image src="../../static/myIcon/appointment.png" mode="aspectFit"></image>
          </view>
          <view class="center">
            <text>预约拜访</text>
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 新增通知公告入口 -->
      <view class="card">
        <view class="item" @click="toNotice">
          <view class="left flex-center">
            <image src="../../static/myIcon/notice.png" mode="aspectFit"></image>
          </view>
          <view class="center">
            <text>通知公告</text>
            <view class="badge" v-if="unreadNoticeCount > 0">{{unreadNoticeCount}}</view>
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加退出登录按钮 -->
    <view class="quit">
      <button class="btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
		student:{
		"studentId": null,
		"studentName": "",
		"passwd": "",
		"grade": "1",
		"signPhoto": ""
	},
	unreadNoticeCount: 0 // 未读通知数量
	};
  },
  onInit() {},
  onLoad() {},
  onShow() {
    // 每次显示页面时获取未读通知数量
    this.getUnreadNoticeCount();
  },
  onReady() {},
  beforeDestroy() {},
  onReachBottom() {},
  onShareAppMessage(res) {},
  created() {
	  this.loadMineInfo();
  },
  methods: {
	  loadMineInfo(){
	  		  request.post("/student/mine")
	  		  .then(res=>{
	  			  let data = res.data;
	  			  this.student = data;
	  		  });
	  },
	  toSignList(){
		  uni.navigateTo({
		  	url:'/pages/my_sign_list/my_sign_list'
		  })
	  },
	  toLeaveList(){
		  uni.navigateTo({
		  	url:'/pages/leave_record/leave_record',
			fail(err) {
				console.log(err);
			}
		  })
	  },
      // 添加预约拜访导航方法
      toAppointment() {
          uni.navigateTo({
              url: '/pages/appointment/appointment',
              fail(err) {
                  console.log(err);
                  uni.showToast({
                      title: '页面跳转失败',
                      icon: 'none'
                  });
              }
          });
      },
      // 添加通知公告导航方法
      toNotice() {
          uni.navigateTo({
              url: '/pages/notice/notice'
          });
      },
      // 获取未读通知数量
      getUnreadNoticeCount() {
          request.post('/notice/unreadCount')
              .then(res => {
                  if (res.success) {
                      this.unreadNoticeCount = res.data || 0;
                  }
              })
              .catch(err => {
                  console.error('获取未读通知数量失败:', err);
              });
      },
      // 退出登录方法
      logout() {
          uni.showModal({
              title: '提示',
              content: '确定要退出登录吗？',
              success: (res) => {
                  if (res.confirm) {
                      // 清除本地存储的token
                      uni.removeStorageSync('token');
                      // 跳转到登录页面
                      uni.reLaunch({
                          url: '/pages/login_or_register/login_or_register'
                      });
                  }
              }
          });
      }
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 250rpx;
  position: relative;
  .background {
    background-color: #5199ff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 180rpx;
    width: 100%;
  }
}
.icon {
  color: #96a1ae;
  font-size: 40rpx;
}
.user-card {
  height: 170rpx;
  padding: 0 15px;
  .card {
    position: relative;
    bottom: 62px;
    height: 250rpx;
    background-color: white;
    border-radius: 5px;
    .top {
      height: 30%;
      position: relative;
      .userImage {
        position: absolute;
        bottom: 24%;
        left: 10%;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid white;
      }
    }
    .bottom {
      display: flex;
      height: 70%;
      .left {
        width: 80%;
        height: 100%;
        position: relative;
        .user-text {
          width: 100%;
          font-size: 1.6em;
          padding-left: 80rpx;
          height: 50%;
        }
        .user-phone {
          color: #96a1ae;
          padding-left: 80rpx;
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
      .right {
        width: 20%;
        height: 50%;
      }
    }
  }
}
.list-card {
  padding: 0 15px;
  .card {
    border-radius: 5px;
    position: relative;
    background-color: white;
    border-radius: 5px;
    padding: 5px 30px;
    .item {
      display: flex;
      height: 120rpx;
      .left {
        width: 15%;
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
      .center {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 1em;
        position: relative;
        
        .badge {
          position: absolute;
          right: 10rpx;
          top: 50%;
          transform: translateY(-50%);
          background-color: #ff4d4f;
          color: white;
          font-size: 24rpx;
          height: 36rpx;
          min-width: 36rpx;
          line-height: 36rpx;
          text-align: center;
          border-radius: 18rpx;
          padding: 0 8rpx;
        }
      }
      .right {
        width: 20%;
        justify-content: flex-end;
      }
    }
  }
}
.item-bottom-solid {
  border-bottom: 1px solid #d4d6da;
}
.quit{
  height: 100rpx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  .btn{
    background-color: #4f99ff;
    border-radius: 30px;
    width: 80%;
    color: white;
    font-size: 1.2em;
    height: 100%;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>